<%@page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="include1.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>聪聪工作室</title>
   <script src="js/jquery.min.js"></script>
   <script src="js/highcharts.js"></script>  
   <script src="js/drilldown.js"></script>  
   <script src="js/data.js"></script> 
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() { 
 
   Highcharts.data({
      csv: document.getElementById('tsv').innerHTML,
      itemDelimiter: '\t',
      parsed: function (columns) {
         var brands = {}, brandsData = [], versions = {}, drilldownSeries = [];
         
		 // Parse percentage strings
         columns[1] = $.map(columns[1], function (value) {
            if (value.indexOf('%') === value.length - 1) {
               value = parseFloat(value);
            }
            return value;
         });

         $.each(columns[0], function (i, name) {
            var brand, version;

            if (i > 0) {

               // Remove special edition notes
               name = name.split(' -')[0];

               // Split into brand and version
               version = name.match(/([0-9]+[\.0-9x]*)/);
               if (version) {
                  version = version[0];
               }
               brand = name.replace(version, '');

               // Create the main data
               if (!brands[brand]) {
                  brands[brand] = columns[1][i];
               } else {
                  brands[brand] += columns[1][i];
               }

               // Create the version data
               if (version !== null) {
                  if (!versions[brand]) {
                     versions[brand] = [];
                  }
                  versions[brand].push(['月份：' + version, columns[1][i]]);
               }
            }

         });

         $.each(brands, function (name, y) {
            brandsData.push({
               name: name,
               y: y,
               drilldown: versions[name] ? name : null
            });
         });
         $.each(versions, function (key, value) {
            drilldownSeries.push({
                name: key,
                id: key,
                data: value
            });
         }); 
 
         var chart = {
            type: 'column'
         };
         var title = {
            text: '能耗总量'   
         };    
         var subtitle = {
            text: ''
         };
         var xAxis = {
            type: 'category'      
         };
         var yAxis ={
            title: {
              text: '消耗量'
            }
         };  
         var tooltip = {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> in total<br/>'
         };   
         var credits = {
            enabled: false
         };
         var series= [{
            name: '能源种类',
            colorByPoint: true,
            data: brandsData
         }];
         var drilldown= {
            series: drilldownSeries
         }   
      
         var json = {};   
         json.chart = chart; 
         json.title = title;   
         json.subtitle = subtitle;
         json.xAxis = xAxis;
         json.yAxis = yAxis;   
         json.tooltip = tooltip;   
         json.credits = credits;
         json.series = series;
         json.drilldown = drilldown;
         $('#container').highcharts(json);
     }
   });
});

</script>
<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">
Browser Version	Total Market Share
电 1.0	<%=jan1%>%
电 2.0	<%=feb1%>%
电 3.0	<%=mar1%>%
电 4.0	<%=apr1%>%
电 5.0	<%=may1%>%
电 6.0	<%=jun1%>%
电 7.0	<%=july1%>%
电 8.0	<%=aug1%>%
电 9.0	<%=sep1%>%
电 10.0	<%=oct1%>%
电 11.0	<%=nov1%>%
电 12.0	<%=dec1%>%
水 1.0	<%=jan2%>%
水 2.0	<%=feb2%>%
水 3.0	<%=mar2%>%
水 4.0	<%=apr2%>%
水 5.0	<%=may2%>%
水 6.0	<%=jun2%>%
水 7.0	<%=july2%>%
水 8.0	<%=aug2%>%
水 9.0	<%=sep2%>%
水 10.0	<%=oct2%>%
水 11.0	<%=nov2%>%
水 12.0	<%=dec2%>%
天然气 1.0	<%=jan3%>%
天然气 2.0	<%=feb3%>%
天然气 3.0	<%=mar3%>%
天然气 4.0	<%=apr3%>%
天然气 5.0	<%=may3%>%
天然气 6.0	<%=jun3%>%
天然气 7.0	<%=july3%>%
天然气 8.0	<%=aug3%>%
天然气 9.0	<%=sep3%>%
天然气 10.0	 <%=oct3%>%
天然气 11.0	 <%=nov3%>%
天然气 12.0	 <%=dec3%>%
汽油 1.0	<%=jan4%>%
汽油 2.0	<%=feb4%>%
汽油 3.0	<%=mar4%>%
汽油 4.0	<%=apr4%>%
汽油 5.0	<%=may4%>%
汽油 6.0	<%=jun4%>%
汽油 7.0	<%=july4%>%
汽油 8.0	<%=aug4%>%
汽油 9.0	<%=sep4%>%
汽油 10.0	<%=oct4%>%
汽油 11.0	<%=nov4%>%
汽油 12.0	<%=dec4%>%
柴油 1.0	<%=jan5%>%
柴油 2.0	<%=feb5%>%
柴油 3.0	<%=mar5%>%
柴油 4.0	<%=apr5%>%
柴油 5.0	<%=may5%>%
柴油 6.0	<%=jun5%>%
柴油 7.0	<%=july5%>%
柴油 8.0	<%=aug5%>%
柴油 9.0	<%=sep5%>%
柴油 10.0	<%=oct5%>%
柴油 11.0	<%=nov5%>%
柴油 12.0	<%=dec5%>%
煤 1.0	<%=jan6%>%
煤 2.0	<%=feb6%>%
煤 3.0	<%=mar6%>%
煤 4.0	<%=apr6%>%
煤 5.0	<%=may6%>%
煤 6.0	<%=jun6%>%
煤 7.0	<%=july6%>%
煤 8.0	<%=aug6%>%
煤 9.0	<%=sep6%>%
煤 10.0	<%=oct6%>%
煤 11.0	<%=nov6%>%
煤 12.0	<%=dec6%>%
</pre>
</body>
</html>
